<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			body{
				background-color: #000;
			}
			#myCanvas{
				position: absolute;
				z-index: 1;
			}
			input[type="range"]{
				width: 400px;
			}
			.ui{
				display: none;
				color: #fff;
			}
			.inline{
				display: flex;
				height: 60px;
				align-items: center;
			}
			.txt{
				margin-right: 20px;
			}
			.btn-area{
				position: fixed;
				left: 0;
				top: 0;
				width: 160px;
				height: 100%;
				padding-top: 20px;
				background-color: #00000022;
				z-index: 2;
				transition: .2s;
			}
			.btn-area:hover{
				background-color: #99999944;
			}
			.cell{
				width: 100%;
				height: 50px;
				box-sizing: border-box;
				padding: 0 20px;
				line-height: 50px;
				color: #c5c5c5aa;
				text-align: center;
				user-select: none;
				cursor: pointer;
				transition: .3s;
			}
			
			.cell:hover{
				color: #fff;
				background-color: #00000033;
			}
			.cell.act{
				color: #fff;
				background-color: #00000088;
			}
			.btn{
				border-bottom: 1px solid #ffffff55;
			}
		</style>
	</head>
	<body>
		<div id="funButtons" class="btn-area">
			<div class="cell"><div data-index="0" class="btn">mode 1</div></div>
			<div class="cell"><div data-index="1" class="btn">mode 2</div></div>
			<div class="cell"><div data-index="2" class="btn">mode 3</div></div>
			<div class="cell"><div data-index="3" class="btn">mode 4</div></div>
			<div class="cell"><div data-index="4" class="btn">mode 5</div></div>
			<div class="cell"><div data-index="5" class="btn">mode 6</div></div>
			<div class="cell act"><div data-index="6" class="btn">test mode 7</div></div>
		</div>
		<canvas id="myCanvas" width="800" height="800"></canvas>
		<script type="text/javascript" src="tCanvas.js"></script>
		<script type="text/javascript">
			var pDemo = new Particle({
				mode: 7,
				mode7(){
					this.draw(()=>{
						this.cx.fillStyle = "#fff"
						this.cx.setTransform(1,.5,0,1,30,0)
						this.cx.fillRect(0,0,400,400)
					},true)
				}
			})
			
			// 以下是栏目切换
			function switchMode (modeIndex) {
				pDemo.destroy()
				pDemo = new Particle({
					mode: modeIndex,
					preEmit: true,
				})
			}
			funButtons.onclick = e => {
				var index = Number(e.target.dataset.index)
				var c = Array.from(e.currentTarget.children)
				c.forEach((el,i)=>{
					el.classList[i==index?'add':'remove']("act")
				})
				switchMode(index + 1)
			}
		</script>
	</body>
</html>
